<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="layout/layout_register"
>
<head>
	<title>注册新用户</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/base.min.css" th:href="@{/asset/css/base.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/front/register.css" th:href="@{/asset/css/front/register.css}"/>
	<style>
		h4 {
			border-bottom: 1px solid #f4f4f4;padding: 5px; margin-bottom: 1em;
		}
	</style>
</head>
<body>
<div layout:fragment="content" class="wrapper register-wrapper">
	<div class="register-container container">
		<div class="register-name text-center mb-3">
			<img style="max-height:100px; max-width: 100px;" th:src="${client.logo}">
		</div>
		<div class="register-name text-center mb-3" style="font-size: 30px;">欢迎注册</div>


		<form th:action="@{/register/baseInfo}" method="post" class="form-horizontal register-form" th:object="${user}" role="form">

			<div class="row">
				<div class="col-12 col-md-8 offset-md-2">
					<!--<div class="form-group row">-->
					<!--<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>-->
					<!--<div class="col-sm-10">-->
					<!--<input type="password" class="form-control" id="inputPassword" placeholder="Password">-->
					<!--</div>-->
					<!--</div>-->

					<h4>账号信息</h4>
					<div th:replace="layout/register_field::registerField(${baseFields},0)"></div>
					<th:block th:if="${!#lists.isEmpty(fieldDescriptors)}">
						<h4>用户信息</h4>
						<div th:replace="layout/register_field::registerField(${fieldDescriptors},0)"></div>
					</th:block>

					<div class="form-group row p-4">
						<input type="submit" class="btn btn-primary col-sm-10 offset-sm-2" value="注册">
					</div>

					<div class="form-group row px-4" th:if="${!#strings.isEmpty(appUrl)}">
						<!--				<input type="submit" class="btn btn-block btn-primary" value="下载 APP" th:value="#{user.login}">-->
						<a th:href="@{${appUrl}}" class="btn btn-block btn-primary col-sm-10 offset-sm-2">下载 APP</a>
					</div>

					<div class="text-right">
						<a href="#" th:href="@{/login}">已有账号，前往登录</a>
						<a href="#" th:href="@{/forgot}" class="border border-primary border-bottom-0 border-top-0 border-right-0 pl-2 ml-1">忘记密码</a>
					</div>

				</div>
			</div>
		</form>
	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" src="../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script th:inline="javascript">

		/*<![CDATA[*/
		function autoFillBirthday() {
			var val = $('input#idCardNum').val();
			val = val.substr(6, 8);
			val = val.length === 8 ? val.substr(0, 4) + "-" + val.substr(4, 2) + '-' + val.substr(6, 2) : "1900-01-01";
			$('input#birthday').val(val);
		}

		if ($('select#cardType')) {
			$('select#cardType').on("change", function (e) {
				var val = $('select#cardType').val();
				var path = /*[[@{/register/hint/idCardNum?cardType=}]]*/ './hint/idCardNum?cardType=';
				path += val;
				$.ajax({
					type: 'POST',
					url: path,
					success: function (data, textStatus, jqXHR) {
						if (data.success)
							$('small#idCardNum').text(data.message);
					}
				});

				if ($('div#birthday.form-group')) {
					if (val === 'ID_CARD_2') {
						$('div#birthday.form-group').attr("hidden", "hidden");
						if ($('input#idCardNum')) {
							$('input#idCardNum').on("blur", autoFillBirthday);
							$('input#idCardNum').trigger('blur');
						}
					}
					else {
						$('div#birthday.form-group').removeAttr("hidden");
						if ($('input#idCardNum')) {
							$('input#idCardNum').trigger('blur');
							$('input#idCardNum').off("blur", autoFillBirthday);
						}
					}
				}
			});
			$('select#cardType').trigger('change');
		}

		$(function () {
			App.initDatetimePicker();
			$('form').validate({
				errorElement: 'div',
				errorClass: 'text-danger form-control-feedback'
			});

			var imageCropper;
			$('#avatarModal').on('show.bs.modal', function () {
				$('#avatar-original').attr('src', '').hide();
				$('#avatar-tips').show();
				imageCropper && imageCropper.destroy();

				var avatarUrl = /*[[@{${user.avatar}}]]*/ '../../static/asset/img/~default_TmtUser_avatar.jpg';
				var previewCanvas = $('.img-preview canvas')[0];
				var previewCanvasContext = previewCanvas.getContext('2d');
				var currentAvatarImage = new Image();
				currentAvatarImage.src = avatarUrl;
				currentAvatarImage.onload = function () {
					previewCanvasContext.drawImage(currentAvatarImage, 0, 0, previewCanvas.width, previewCanvas.height);
				};

				var imageOriginal = $('#avatar-original')[0];
				var cropperOption = {
					viewMode: 1,
					aspectRatio: 1,
					crop: function (e) {
						var t = imageCropper.getCroppedCanvas({
							width: 100,
							beforeDrawImage: function (canvas) {
								var context = canvas.getContext('2d');
								context.imageSmoothingEnabled = false;
								context.imageSmoothingQuality = 'high';
							}
						});

						$('.img-preview div').empty().append(t);
					}
				};
				imageCropper = new Cropper(imageOriginal, cropperOption);
				$('#cropper-file').on('change', function (e) {
					if ($(this).val()) {
						var fr = new FileReader();
						fr.onload = function (e) {
							$('#avatar-tips').hide();
							$('#avatar-original').attr('src', fr.result).show();
							imageCropper.destroy();
							imageCropper = new Cropper(imageOriginal, cropperOption);
							imageCropper.crop();
						};
						fr.readAsDataURL($(this)[0].files[0]);
						$(this).val(null);
					}
				});

				$('#upload-file').on('click', function () {
					// could upload or not
					if (!$('#avatar-tips').is(':hidden')) {
						$('.modal-message').text('请先选择图片').fadeIn();
						setTimeout(function () {
							$('.modal-message').fadeOut(function () {
								$('.modal-message').text('');
							});
						}, 5000);
						return;
					}

					// modal dismiss
					$('#avatarModal').modal('hide');

					App.alertProcess('', '正在上传');

					// reset filepath
					var data = $('.img-preview canvas')[0].toDataURL();
					var avatarEdit = /*[[@{/edit/avatar}]]*/ '';
					$.ajax(avatarEdit, {
						method: "POST",
						data: {avatar: data},
						success: function (result) {
							App.handleAjax(result, function () {
								swal('', '上传成功', 'success');
								$('.user-avatar img').removeAttr('src').attr('src', result.data + '?v=' + Math.random());
							}, function () {
								swal('', '上传失败', 'error');
							});
						}
					});
				})
			})
		})
		/*]]>*/
	</script>

</th:block>
</body>
</html>
